﻿<!DOCTYPE html>
<html ng-app="scopesApp">
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script>
        angular.module("scopesApp", [])
        .controller("fatherCtrl", function ($scope) {
            $scope.data = "father's data";
        })
        .controller("firstChildCtrl", function ($scope) {
            $scope.dataFirst = "first child's data";
        })
        .controller("secondChildCtrl", function ($scope) {
            $scope.dataSecond = "second child's data";
        });
    </script>
</head>
<body>
    <div class="container" ng-controller="fatherCtrl">
        <div class="well" ng-controller="firstChildCtrl">
            <div>data= {{ data }}</div>
            <div>dataFirst= {{ dataFirst }}</div>
            <div>dataSecond= {{ dataSecond }}</div>
        </div>
        <div class="well" ng-controller="secondChildCtrl">
            <div>data= {{ data }}</div>
            <div>dataFirst= {{ dataFirst }}</div>
            <div>dataSecond= {{ dataSecond }}</div>
        </div>
    </div>
</body>
</html>
